<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">详情</div>
      <div class="extra fr">
        <el-button @click="back">返回</el-button>
      </div>
    </div>
    <div class="app-container margin-content padding-content">
      <div class="block">
        <div class="title">报关（检）单号:{{result.declNo}}</div>
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">提运单号</div>
            <div class="detail">{{result.blNo}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱号</div>
            <div class="detail">{{result.contNo}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">进出口标识</div>
            <div class="detail">{{result.ieFlag | ieFlagFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">申报口岸</div>
            <div class="detail">{{result.declPort | portCodeFilter}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
      <div class="block">
        <div class="title">查验</div>
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">查验下达时间</div>
            <div class="detail">{{result.checkTime}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">查验方式</div>
            <div class="detail">{{result.checkType && result.checkType.charAt(0) | checkTypeFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">具体要求</div>
            <div class="detail">{{result.require}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">查验场地</div>
            <div class="detail">{{result.checkSite}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">查验来源</div>
            <div class="detail">{{result.checkSource | typeFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">查验结果</div>
            <div class="detail">{{result.resType | resTypeFilter}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
      <div class="block">
        <div class="title">查验准备操作细项</div>

        <el-table
          :key="tableKey"
          :data="tableData"
          v-loading="loading"
          element-loading-text="正在加载..."
          style="width: 100%;">

          <el-table-column label="作业类型" property="actType">
            <template slot-scope="scope">
              {{scope.row.actType | chkReadyFilter}}
            </template>
          </el-table-column>
          <el-table-column label="集装箱位置" property="location"></el-table-column>
          <el-table-column label="作业时间" property="readyTime"></el-table-column>
        </el-table>
        <divider></divider>
      </div>
      <div class="block">
        <div class="title">放行方式</div>
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">放行下达时间</div>
            <div class="detail">{{result.releaseTime}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">放行类型</div>
            <div class="detail">{{result.releaseType}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">收/发货人</div>
            <div class="detail">{{result.consignee}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">放行来源</div>
            <div class="detail">{{result.releaseSource | typeFilter}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
    </div>
  </div>
</template>

<script>
  // api
  import { fetchDetail } from '@/api/chkOrder'
  // vuex
  import { mapGetters } from 'vuex'
  // components
  import Divider from '@/components/Divider'

  export default {
    name: 'chk-manage-detail',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        result: {}
      }
    },
    computed: {
      ...mapGetters([
        'currentId'
      ])
    },
    created() {
      this._fetchDetail()
    },
    methods: {
      _fetchDetail() {
        this.loading = true
        fetchDetail({ id: this.currentId }).then((res) => {
          this.result = res.data.data
          this.tableData = res.data.data.readies
          this.loading = false
        })
      },
      back() {
        this.$parent.back()
      }
    },
    components: {
      Divider
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
